<template>
  <dtDialog
    :title="modalTitle"
    :visible.sync="dialogVisible"
    :is-loading="loading"
    append-to-body
    @comfirmBtn="onSubmit()"
    @closeDialog="onClose"
  >
    <el-form slot="content" ref="menuButtonForm" label-width="110px"
             :model="form" :rules="rules">
      <el-form-item label="菜单按钮名称" prop="buttonName">
        <el-input v-model="form.buttonName" placeholder="请输入菜单按钮名称" maxlength="20"
                  class="limit" />
      </el-form-item>
      <el-form-item label="菜单按钮编号" prop="buttonCode">
        <el-input v-model="form.buttonCode" :disabled="action === 'edit'" maxlength="50"
                  placeholder="请输入菜单按钮编号" class="limit" />
      </el-form-item>
    </el-form>
  </dtDialog>
</template>
<script>
import { addSysMenuButton, editSysMenuButton } from '@/framework/api/menu'

export default {
  name: 'MenuButtonModal',
  data() {
    return {
      loading: false,
      dialogVisible: false,
      action: '',
      form: {
        buttonCode: '',
        buttonName: '',
        menuId: ''
      },
      rules: {
        buttonName: [
          { required: true, message: '请输入按钮名称', trigger: 'change' }
        ],
        buttonCode: [
          { required: true, message: '请输入按钮编码', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    modalTitle() {
      let title = ''
      if (this.action === 'add') {
        title = '新增菜单按钮'
      } else if (this.action === 'edit') {
        title = '修改菜单按钮'
      }
      return title
    }
  },
  methods: {
    add(menu) {
      this.edit(menu, {})
    },
    edit(menu, record) {
      this.form.menuId = menu.menuId
      if (this.action === 'edit') {
        this.form = {
          menuId: menu.id,
          ...record
        }
      }
      this.dialogVisible = true
    },
    onSubmit() {
      this.$refs.menuButtonForm.validate((result, message) => {
        if (result) {
          if (this.action === 'add') {
            this.loading = true
            addSysMenuButton(this.form).then((resp) => {
              if (resp.success) {
                this.$message.success('新增成功')
                this.onClose()
                this.$emit('added')
              }
            }).finally(() => {
              this.loading = false
            })
          } else if (this.action === 'edit') {
            this.loading = true
            editSysMenuButton(this.form).then((resp) => {
              if (resp.success) {
                this.$message.success('修改成功')
                this.onClose()
                this.$emit('edited')
              }
            }).finally(() => {
              this.loading = false
            })
          }
        }
      })
    },
    onClose() {
      this.resetForm()
      this.dialogVisible = false
    },
    resetForm() {
      this.form = {
        buttonCode: '',
        buttonName: '',
        menuId: ''
      }
      this.$refs.menuButtonForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
